<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import home from '@/assets/image/home_act.png';
  import duchang from '@/assets/image/duchang.png';
  import lanqiu from '@/assets/image/lanqiu.png';
  const router = useRouter();
  const headerList = ref([
    { title: '家', icon: home, id: 0 },
    { title: '赌场', icon: duchang, id: 1 },
    { title: '运动的', icon: lanqiu, id: 2 },
    { title: '赛车', icon: home, id: 3 },
    { title: '期货', icon: home, id: 4 },
    { title: '贸易', icon: home, id: 5 },
    { title: '彩票', icon: home, id: 6 },
    { title: '答对了', icon: home, id: 7 },
  ]);
  const headerId = ref(0);
  const dcList = ref([
    { title: 'BC原创', icon: duchang, id: 0 },
    { title: '老虎机', icon: duchang, id: 1 },
    { title: '热门游戏', icon: duchang, id: 2 },
    { title: '真人娱乐场', icon: duchang, id: 3 },
    { title: '桌上游戏', icon: duchang, id: 4 },
    { title: 'BC原创', icon: duchang, id: 5 },
    { title: 'BC原创', icon: duchang, id: 6 },
    { title: 'BC原创', icon: duchang, id: 7 },
    { title: 'BC原创', icon: duchang, id: 8 },
  ]);
  const selectCategory = (item) => {
    headerId.value = item.id;
  };
  const gameDetail = (item) => {
    router.push('/gameDetail');
  };
</script>
<template>
  <div class="index">
    <div class="header">
      <div
        :class="headerId == item.id ? 'header-item header-item-active' : 'header-item'"
        v-for="item in headerList"
        :key="item.id"
        @click="selectCategory(item)"
      >
        <img :src="item.icon" alt="" />
        <p>{{ item.title }}</p>
      </div>
    </div>

    <el-carousel height="150px" class="banner-wrap">
      <el-carousel-item v-for="item in 4" :key="item">
        <img src="@/assets/image/banner.avif" class="banner" alt="" />
      </el-carousel-item>
    </el-carousel>
    <div class="title">
      <i></i>
      <p>最近的重大胜利</p>
    </div>
    <div class="games">
      <div class="game" v-for="item in 10" :key="item">
        <div class="game-left">
          <img src="@/assets/image/game.png" alt="" />
          <p>荒野大嫖客</p>
        </div>
        <div class="game-right">
          <p> ￥7,078,432</p>
          <img src="@/assets/image/dol.webp" class="info" alt="" />
          <img src="@/assets/image/right.png" class="right-icon" alt="" />
        </div>
      </div>
    </div>
    <div class="label">
      <div>
        <img src="@/assets/image/duchang.png" alt="" />
        <p>赌场</p>
      </div>
      <p>查看全部</p>
    </div>
    <div class="dc-list">
      <div class="dc" v-for="item in dcList" :key="item.id">
        <img :src="item.icon" alt="" />
        <p>{{ item.title }}</p>
      </div>
    </div>
    <div class="dc-games">
      <div class="dc-game" v-for="item in 10" :key="item" @click="gameDetail(item)">
        <img src="@/assets/image/game.png" alt="" />
        <p>BC原创</p>
      </div>
    </div>
    <div class="label">
      <div>
        <img src="@/assets/image/lanqiu.png" alt="" />
        <p>体育直播</p>
      </div>
      <p>查看全部</p>
    </div>
    <div class="broadcasts">
      <div class="broadcast" v-for="item in 10" :key="item">
        <div class="top">
          <p>超级联赛</p>
          <div>
            <p class="l">下半场</p>
            <p class="r">下注</p>
          </div>
        </div>
        <div class="center">
          <div class="left">
            <img src="https://static.sptpub.com/competitors/images/normal/medium/3.png" alt="" />
            <p>伍尔弗汉普顿</p>
          </div>
          <p class="num">1&nbsp;&nbsp;:&nbsp;&nbsp;0</p>
          <div class="right">
            <img src="https://static.sptpub.com/competitors/images/normal/medium/6.png" alt="" />
            <p>伯恩利足球俱乐部</p>
          </div>
        </div>
        <div class="bottom">
          <div>
            <p>1</p>
            <p>1.07</p>
          </div>
          <div>
            <p>画</p>
            <p>9.5</p>
          </div>
          <div>
            <p>2</p>
            <p>1.07</p>
          </div>
        </div>
      </div>
    </div>
    <div class="label">
      <div>
        <img src="@/assets/image/lanqiu.png" alt="" />
        <p>老虎机的热门游戏</p>
      </div>
      <p>查看全部</p>
    </div>
    <div class="dc-games">
      <div class="dc-game" v-for="item in 10" :key="item">
        <img src="@/assets/image/game.png" alt="" />
        <p>BC原创</p>
      </div>
    </div>
    <div class="remark">
      <p class="bt">加密在线赌场</p>
      <p>在线赌场并不总是存在，但我们可以有把握地说，自从在线赌场出现以来，它们已经被广泛使用。</p>
      <p
        >需求和选择并不短缺，现在到了 2023 年，我们有成千上万种可供选择 -
        这只是您喜欢什么以及您希望在赌场看到什么支付选项的问题。</p
      >
      <p>玩家总是在寻找新的东西，这将有助于让游戏体验变得更好、更容易上手。</p>
      <p>让玩家专注于赌场的绝对乐趣，没错，就是游戏本身。</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .remark {
    width: auto;
    padding: 1.875rem 1.5rem;
    background-color: #2d3035;
    margin-top: 3rem;
    .bt {
      color: #fff;
      font-size: 2rem;
      font-weight: 700;
    }
    p {
      color: #98a7b5;
      font-size: 0.875rem;
    }
  }
  .broadcasts {
    padding: 0 0.75rem;
    display: flex;
    overflow-x: scroll;
    width: auto;
    flex-wrap: nowrap;
    .broadcast {
      height: 11.25rem;
      width: 21.875rem;
      cursor: pointer;
      flex: none;
      border-radius: 0.25rem;
      background: #32343b;
      margin-right: 0.5rem;

      padding: 0 0.625rem;
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        > p {
          color: #fff;
          font-size: 0.875rem;
        }
        > div {
          height: 1.5rem;
          background: #1c1e22;
          border-radius: 0.25rem;
          display: flex;
          align-items: center;
          padding-left: 0.25rem;
          .l {
            color: #98a7b5;
            font-size: 0.75rem;
          }
          .r {
            height: 1.5rem;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            padding: 0 0.25rem;
            border: 1px solid #ec4016;
            background: rgba(236, 64, 22, 0.1);
            border-radius: 0.25rem;
            color: #ec4016;
            font-size: 0.75rem;
          }
        }
      }
      .center {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.75rem;
        .left {
          p {
            color: #fff;
            font-size: 0.875rem;
            margin: 0.25rem 0 0 0;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          p {
            color: #fff;
            font-size: 0.875rem;
            margin: 0.25rem 0 0 0;
          }
        }
        .num {
          color: #fff;
          font-size: 1.75rem;
          font-weight: 700;
        }
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        > div {
          width: 25%;
          height: 2rem;
          border-radius: 0.25rem;
          background: #1c1e22;
          color: #fff;

          display: flex;

          justify-content: space-between;

          align-items: center;
          padding: 0 0.5rem;
          p {
            color: #fff;
            font-size: 0.75rem;
          }
        }
      }
    }
  }
  .index {
    padding-bottom: 100px;
  }
  .dc-games {
    padding: 0 0.75rem;
    display: flex;
    overflow-x: scroll;
    width: auto;
    flex-wrap: nowrap;
    .dc-game {
      margin-right: 00.5rem;
      img {
        width: 7.5rem;
        height: 7.5rem;
        display: block;
      }
      p {
        padding: 0.5rem;
        color: #fff;
        font-size: 0.875rem;
        display: block;
        text-align: center;
        margin: 0;
        background: #32343b;
      }
    }
  }
  .dc-list {
    padding: 0 0.75rem;
    display: flex;
    overflow-x: scroll;
    width: auto;
    flex-wrap: nowrap;
    .dc {
      display: flex;
      align-items: center;
      margin-right: 0.5rem;
      p {
        color: #67707b;
        white-space: nowrap;
        font-size: 0.875rem;
      }
    }
  }
  .label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    div {
      display: flex;
      align-items: center;
      img {
        width: 2.5rem;
        height: 2.5rem;
        display: block;
        margin-right: 0.5rem;
      }
      p {
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
      }
    }
    p {
      color: #3bc117;
      font-size: 0.875rem;
    }
  }
  .games {
    height: 9.5rem;
    background: #2e3035;
    margin: 0 0.75rem 0;
    overflow-y: scroll;
    .game {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.5rem;
      .game-left {
        display: flex;
        align-items: center;
        img {
          display: block;
          width: 2.5rem;
          height: 2.5rem;
          margin-left: 0.5rem;
        }
        p {
          color: #98a7b5;
          font-size: 0.875rem;
          margin-left: 0.5rem;
        }
      }
      .game-right {
        display: flex;
        align-items: center;
        .info {
          display: block;
          width: 0.875rem;
          height: 0.875rem;
          margin-left: 0.5rem;
        }
        p {
          color: #3bc117;
          font-size: 0.875rem;
          font-weight: 700;
        }
        .right-icon {
          width: 1rem;
          height: 1rem;
          display: block;
          margin-right: 0.5rem;
          margin-left: 0.5rem;
        }
      }
    }
  }
  :deep(.el-carousel__item) {
    background: $base-content-bg-color !important;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .banner {
    display: block;
    width: 95%;
    height: 100%;
    margin: 0 auto;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .title {
    margin-left: 0.75rem;
    display: flex;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    p {
      color: #fff;
      position: relative;
      font-size: 0.875rem;
    }
    i {
      background-color: #45d91e;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 0.25rem;
      position: relative;
      margin-right: 0.625rem;
      display: block;
    }
    i::before {
      content: '';
      position: absolute;
      display: block;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      left: 0%;
      top: 50%;
      margin-top: -0.25rem;
      background-color: #45d91e4d;
      animation: online-s1q1pgo0 infinite 1s linear;
    }
    @keyframes online-s1q1pgo0 {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(2.5);
      }
    }
  }
  .header {
    display: flex;
    align-items: center;
    width: auto;
    flex-wrap: nowrap;
    height: 4.75rem;
    padding: 0 0.75rem;
    overflow-x: scroll;
    .header-item {
      display: flex;
      align-items: center;
      height: 3.25rem;
      padding: 0 0.75rem;
      border-radius: 2rem;
      justify-content: center;
      margin-right: 0.5rem;
      img {
        display: block;
        width: 18px;
        height: 18px;
      }
      p {
        color: #fff;
        white-space: nowrap;
        margin-left: 4px;
      }
    }
    .header-item-active {
      background: #32343b;
    }
  }
  ::-webkit-scrollbar {
    display: none;
  }
</style>
